<template>
  <div class="list" ref="aaaaa">
    <heroe-item
      :heroe="heroe"
      :type="type"
      v-for="(heroe, i) in list"
      :index="i"
      :key="i"
    ></heroe-item>
  </div>
</template>

<script>
import HeroeItem from "@/components/HeroeItem/HeroeItem.vue";
export default {
  name: "HeroeList",
  components: {
    HeroeItem,
  },
  props: {
    data: Array,
    type: String,
  },
  watch: {
    data() {
      this.list.splice(0, this.list.length);
      this.list.push(...this.data);
    },
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.list.push(...this.data.slice(0, 10));
    setTimeout(() => {
      this.list.push(...this.data.slice(10, this.data.length));
    }, 100);
  },
};
</script>

<style lang="scss" scoped>
.list {
  padding-bottom: 1px;
}
</style>
